<script setup>
import Games from "@/views/FrontViews/StoreModule/Category/components/Games.vue";
import Carousel from "@/views/FrontViews/StoreModule/Category/components/Carousel.vue";
import {useRoute} from "vue-router";
import {ref, watch, onMounted} from "vue";
import {categoryGetAPI} from "@/api/FrontApi/category.js";

const route = useRoute()
const category = ref({})
const getCategoryName = async (id = route.params.id) => {
  const res = await categoryGetAPI(id)
  category.value = res.data
}

onMounted(() => getCategoryName())

const title = ref()

watch(
    () => route.params.id,
    (newValue) => {
      getCategoryName(newValue)
    },
    { immediate: true }
);
</script>

<template>
  <div class="container">
    <span class="title">{{ category.name }}</span>
  </div>
  <Carousel></Carousel>
  <Games></Games>
</template>

<style scoped>
.container {
  color: #fff;
  font-size: 48px;
  font-weight: bold;
  .title {
    margin-left: 120px;
    padding: 4px 6px;
  }
}
</style>
